<?php $this->headScript()
->appendFile($this->js('jquery-ui/ui/jquery.ui.dialog.js'))
->appendFile($this->js('plugins/jquery.form.js'))
->appendFile($this->js('plugins/jquery.scrollTo-min.js'))
->appendFile($this->js('plugins/jquery.selectboxes.js'))
?>
<script type="text/javascript">

$(document).ready(function(){
    $("#sn").change(function(){
        $("#stageForm").submit();
     });

    $("#saveBtn").click(function(){
        $(this).attr('disabled','disabled');
        $("#editMode").attr('value',1);
        $("#stageForm").submit();
     });

    $("#stage-list tbody tr").click(function(){
        if (!$(this).hasClass('selectTr')) {
        	$(".selectTr").removeClass('selectTr');
            $(this).addClass('selectTr');
            // dialog 顯示學生名字
            var name = $(".selectTr td:nth-child(1)").html() +' '+ $(".selectTr td:nth-child(2)").html();
            $("#current-student").html(name);
        }
        });

    // 下一位學生
    $("#next-student").click(function(){
    	$(".selectTr textarea").val($('#comment_text').val());
        var nextTr = $(".selectTr + tr");
        if (nextTr.length>0) {
        	$.scrollTo( '.selectTr',0);
            $(".selectTr").removeClass('selectTr');
            nextTr.addClass('selectTr');
            $("#comment-option").val('');
            // dialog 顯示學生名字
            var name = $(".selectTr td:nth-child(1)").html() +' '+ $(".selectTr td:nth-child(2)").html();
            $("#current-student").html(name);
            $('#comment_text').val($(".selectTr textarea").val());
            $("#dialog").dialog('option', 'position', ['right',10]);
        }
        else
            alert('<?php echo $this->translate("last row")?>');
     });

    // 評語按鈕
    $(".commentBtn").click(function(){
    	$("#stage-list tbody tr").trigger('click');
        var ss  = $(this).parent().children('textarea').val();
    	$('#comment_text').val(ss);
//    	var select = $(this).parent().siblings('td').children('select').clone();
//         $('#efforts-clone').html(select);

    	$("#dialog").dialog('option', 'position', ['right',10]);
    	$('#dialog').dialog('open');

     });

    // 更改類別
    $("#comment-kind").change(function(){
        if ($(this).val()  && $("#comment-level").val()) {
            $.getJSON('<?php echo $this->route("get-comment")?>',{
                kind_sn: $(this).val(),
                level_sn: $("#comment-level").val()
             },function(data){
                 $("#comment-option").removeOption(/./);
                 $("#comment-option").addOption({"":"<?php echo $this->translate('select ..')?>"},false);
            	 $("#comment-option").addOption(data,false);
             });
            $("#comment-option").show();
        }
        else {
        	$("#comment-option").hide();
        }
      });

    //更改等級
    $("#comment-level").change(function(){
    	$("#comment-kind").trigger('change');
       });

    // 更改評語
    $("#comment-option").change(function(){
        if ($(this).val() == '')
            return;
        var len = $(this).val().length;
    	 var text = $(this).selectedTexts();
    	 var selText = text[0].substr(len+1);
    	 //alert($("#comment_text").text());
    	 if ($("#comment-continuation").attr('checked') && $("#comment_text").val() !='')
    		 $("#comment_text").val($("#comment_text").val()+'<?php echo $this->translate('delimiter')?>'+selText);
    	 else
    		 $("#comment_text").val(selText);
       });

//  評語 dialog
    $("#dialog").dialog({
        bgiframe: true,
        autoOpen: false,
        width:450,
        height: 300,
        modal: true,
        position: ['right','center'],
        focus: function(){
         $("#inputForm .score:first").focus();

        },
        close:function(){
//            alert($("#comment_text").val());
        	$(".selectTr textarea").val($("#comment_text").val());
         }
    });
	$("#stage-list table tbody tr:even").addClass('even');
    $("#stage-list table tbody tr:odd").addClass('odd');


});

</script>
<style>
#stage-list table{margin:5px; padding:2px;border:#aaa solid thin;background:#ccc}
#stage-list table th {background:#cdd}
#stage-list table td {padding:2px 5px}
#comment-option {display: none}
#stage-list textarea {font-size:13px}
.description{}
.commentBtn{cursor: pointer}
.selectTr {background:#ff0}
#current-student {font-weight: bold;}
</style>

<div id="description-data">
<form id="stageForm"  method="post" action="<?php echo $this->route('index')?>">
<input type="hidden" name="editMode"  id="editMode" value="0" />
<div id="stage-menu">
<select id="sn" name="sn">
<?php foreach($this->teacherCourse as $val):?>
<option value="<?php echo $val['sn']?>" <?php if ($this->sn == $val['sn']):?>selected<?php endif?>><?php echo $val['className']?> - <?php echo $val['name']?></option>
<?php endforeach?>
</select>
<input type="button"  id="saveBtn" value="<?php echo $this->translate('save')?>" />
</div>
<div id="stage-list">
<table>
<thead>
<tr>
    <th><?php echo $this->translate('number')?></th>
    <th><?php echo $this->translate('student name')?></th>
    <th><?php echo $this->translate('score')?></th>
    <th><?php echo $this->translate('Efforts Level')?></th>
    <th><?php echo $this->translate('Score description')?></th>

</tr>
</thead>
<tbody>
<?php foreach($this->students as $sn=>$val):?>
<tr id="sn-<?php echo $sn?>">
<td><?php echo $val['number']?></td>
<td><?php echo $val['name']?></td>
<td><?php if (isset($this->scores[$sn]['score']))echo round($this->scores[$sn]['score'])?></td>
<td><select class="efforts"  name="efforts[<?php echo $sn?>]">
<?php foreach($this->effortsLevel as $key=>$val2):?>
<option value="<?php echo $key?>"<?php if(isset($this->scores[$sn]['efforts']) and $key == $this->scores[$sn]['efforts']): ?> selected="selected"<?php endif?>><?php echo $key?> <?php echo $val2?></option>
<?php endforeach?>
</select></td>
<td>
<img class="commentBtn" src="<?php echo $this->baseUrl?>/images/comment.png" border="0" />
<textarea  class="description"  rows=1 cols=30  name="description[<?php echo $sn?>]"><?php if (isset($this->scores[$sn]['description'])) echo $this->scores[$sn]['description']?></textarea></td>
</tr>
<?php endforeach;?>
</tbody>
</table>
</div>
</form>
<!--評語輸入方塊-->
<div id="dialog" title="<?php echo $this->translate('Reviews input')?>">
<div id="commentDiv">
<table>
<tr>
<td>
<p>
<label for="comment-kind"><?php echo $this->translate('kind')?></label>
<select name="kind" id="comment-kind">
<option value=""><?php echo $this->translate('select ..')?></option>
<?php foreach($this->commentKind as $sn=>$val):?>
<option value="<?php echo $sn?>"><?php echo $val?></option>
<?php endforeach;?>
</select>
<label for="comment-level"><?php echo $this->translate('level')?></label>
<select name="level" id="comment-level">
<option value=""><?php echo $this->translate('select ..')?></option>
<?php foreach($this->commentLevel as $sn=>$val):?>
<option value="<?php echo $sn?>"><?php echo $val?></option>
<?php endforeach;?>
</select>
<input type="checkbox"  id="comment-continuation"  checked="checked"/>
<label for="comment-continuation"><?php echo $this->translate('continuation comment')?></label>
</p>
<p>
<select name="comment" id="comment-option"></select>
</p>
</td>
</tr>
</table>
<div style="float:left;margin:5px">
<p><span id="current-student"></span></p>
<p id="efforts-clone"></p>
<p><input type="button" id="next-student" value="<?php echo $this->translate('next student')?>" /></p>
</div>
<div style="float:left">
<textarea name="text" id="comment_text" rows=5 cols=30></textarea>
</div>
<div style="clear:both"></div>
</div>
</div>
</div>